<template>
	<view class="box">

		<image src="../../../static/image/pic6.png" mode="" class="top-banner"></image>
		<view class="propt-box">
			<view class="propt">
				身份信息是您申请 互助金的唯一凭证
			</view>
			<view class="propt-small">
				填写信息 生效最高35万保障
			</view>
		</view>
		<view class="user-box">


			<view class="info-box">
				<view class="info-list">
					<view class="section flex">
						<view class="section-title">关 　系</view>
						<view class="section-input flex1">
							<picker @change="bindPickerChange" :value="index" :range="infoList" :range-key="'relationName'">
								<view class="flex">

									<view class="uni-input flex1">{{infoList[index].relationName}}</view>
									<image src="../../../static/image/arrow-right.png" mode="" class="arrow-right"></image>

								</view>
							</picker>
						</view>

					</view>
					<view class="section flex flai">
						<view class="section-title">姓 　名</view>
						<input type="text" v-model="name" class="section-input flex1" placeholder="请输入真实姓名" />

					</view>
					<view class="section flex flai">
						<view class="section-title">身 份 证</view>
						<input type="text" v-model="cardid" @input="cardidValidate" class="section-input flex1" maxlength="18" placeholder="请输入身份证号" />

					</view>
				</view>
			</view>
			<view class="wring">
				<view class="atonce" @click="nextPage">确认变更</view>
				<view class="promise flex">
					<text>我承诺加入会员身体健康，无癌症或其他重大病史，点击</text>
					<text>【确认变更】</text><text>即代表您阅读并同意</text>
					<navigator class="green" :url="'/pages/protocol/health?id='+item.id+'&index='+index+'&planId='+planId" v-for="(item,index) in ruleList.list" :key="item.id">《{{item.name}}》</navigator>
					
				</view>

			</view>
		</view>
		<view class="change-mask" v-if="isShowMask">
			<view class="change-box">
				<image src="../../../static/image/change_1.png" class="sun" mode=""></image>
				<view class="success-title">恭喜您，保障人变更成功！</view>
				<view class="user-prompt">
					低于4元/月，为家人添加一份20年最高35万的大病互助保障
				</view>
				<view class="back-home" @click="backHome">
					添加家人
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../../api/index.js'
	import {
		addNotScroll,
		removeNotScroll,
		isCardID
	} from '../../../static/common.js'
	export default {
		data() {
			return {
				infoList: [],
				isWrite: false,
				id: [],
				isShowMask: false,
				name: '',
				cardid: '',
				index: 0,
				relationType: '',
				id: '',
				planId:'',
				ruleList:[]

			}
		},
		onLoad(opt) {
			uni.setNavigationBarTitle({
				title: '保障人信息'
			});

			this.btnMsg = '确认变更'
			this.id = opt.orderId
			this.planId = opt.planId
			// 获取需要变更保障人列表
			this.changeList(opt.planId)
			this.getRule(opt.planId)

		},
		methods: {
			cardidValidate () {
				var value = e.detail.value.replace(/[^\d|x|X_]/g,'')
				setTimeout(() => { 
					this.cardid = value
				}, 0)
			},
			// 获取协议列表
			getRule (id) {
				api.cms.lookPlanRule({id:id,isNew:1}).then(res=>{
				if (res.code ==1) {
					this.ruleList = res.data[0]
				}
				})
			},
			// 下拉选择的时候获取对应的值
			bindPickerChange: function(e) {
				var index = e.target.value
				this.index = index
				this.relationType = this.infoList[index].relationType
				this.id = this.infoList[index].id
			},
			// 获取所有变更人列表信息
			changeList(id) {
				api.myHelp.listByPlan({
					id: id
				}).then(res => {
					if (res.code == 1) {
						var list = res.data
						var newList = []
						var contrastData = [0, 1, 2, 3, 4, 5, 6, 2, 2, 2]
						var children = []
						for (var s in contrastData) {
							for (var y in list) {

								if (list[y]['relationType'] == contrastData[s]) {
									contrastData.splice(s, 1)
								}
							}
						}
						for (var x in list) {
							if (list[x]['relationType'] == 2) {
								children.push(list[x]['relationType'])
							}
						}
						for (var k in contrastData) {
							switch (contrastData[k]) {
								case 0:
									newList.push({
										relationType: 0,
										relationName: '本人'
									})
									break;
								case 1:
									newList.push({
										relationType: 1,
										relationName: '爱人'
									})
									break;

								case 3:
									newList.push({
										relationType: 3,
										relationName: '本人父亲'
									})
									break;
								case 4:

									newList.push({
										relationType: 4,
										relationName: '本人母亲'
									})
									break;
								case 5:

									newList.push({
										relationType: 5,
										relationName: '爱人父亲'
									})
									break;
								case 6:

									newList.push({
										relationType: 6,
										relationName: '爱人母亲'
									})
									break;
							}
						}
						if (children.length == 0) {
							newList.push({
								relationType: 2,
								relationName: '子女1'
							}, {
								relationType: 2,
								relationName: '子女2'
							}, {
								relationType: 2,
								relationName: '子女3'
							}, {
								relationType: 2,
								relationName: '子女4'
							})
						}
						if (children.length == 2) {

							newList.push({
								relationType: 2,
								relationName: '子女1'
							}, {
								relationType: 2,
								relationName: '子女2'
							})
						}
						if (children.length == 1) {

							newList.push({
								relationType: 2,
								relationName: '子女1'
							}, {
								relationType: 2,
								relationName: '子女2'
							}, {
								relationType: 2,
								relationName: '子女3'
							})
						}
						if (children.length == 3) {

							newList.push({
								relationType: 2,
								relationName: '子女1'
							})

						}
						this.infoList = newList
						this.relationType = newList[0].relationType

					}
				})
			},
			// 返回加入互助
			backHome() {
				removeNotScroll()
				this.isShowMask = false
				uni.switchTab({
					url: 'pages/joinPage/joinPage'
				})
			},
			// 去激活保障页面
			nextPage() {
				var nameRegex = /^[\u4e00-\u9fa5]+$/gi
				if (this.name == '') {

					uni.showToast({
						title: '请输入您的姓名',
						icon: 'none'
					})
					return

				}
				if (this.cardid != '') {
					if (isCardID(this.cardid)==false) {
						uni.showToast({
							title: '请输入正确的身份证号',
							icon: 'none'
						})
						return
					}
				} else {
					uni.showToast({
						title: '请输入您的身份证号',
						icon: 'none'
					})
					return
				}
				var parms = {
					name: this.name,
					cardid: this.cardid,
					relationType: this.relationType,
					id: this.id
				}

				api.myHelp.changeSafePerson(JSON.stringify(parms)).then(res => {
					if (res.code == 1) {
						addNotScroll()
						this.isShowMask = true
					}
				})


			},
		}
	}
</script>

<style>
	@import "../../../static/css/common.css";
	@import "./index.css";
</style>
